<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除缓存工具 - 奥数学院</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    
    .container {
      background: white;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      padding: 40px;
      max-width: 600px;
      width: 100%;
    }
    
    h1 {
      color: #667eea;
      margin-bottom: 10px;
      font-size: 28px;
    }
    
    .subtitle {
      color: #666;
      margin-bottom: 30px;
      font-size: 14px;
    }
    
    .info-box {
      background: #f0f4ff;
      border-left: 4px solid #667eea;
      padding: 15px;
      margin-bottom: 20px;
      border-radius: 8px;
    }
    
    .info-box h3 {
      color: #667eea;
      margin-bottom: 10px;
      font-size: 16px;
    }
    
    .info-box p {
      color: #666;
      line-height: 1.6;
      font-size: 14px;
    }
    
    .status {
      background: #fff;
      border: 2px solid #e0e0e0;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
    }
    
    .status-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .status-item:last-child {
      border-bottom: none;
    }
    
    .status-label {
      color: #666;
      font-size: 14px;
    }
    
    .status-value {
      font-weight: 600;
      font-size: 14px;
    }
    
    .status-value.found {
      color: #f44336;
    }
    
    .status-value.empty {
      color: #4caf50;
    }
    
    button {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 15px 30px;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
      margin-bottom: 10px;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    
    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    }
    
    button:active {
      transform: translateY(0);
    }
    
    button.secondary {
      background: #f5f5f5;
      color: #666;
    }
    
    button.secondary:hover {
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    
    .success-message {
      background: #4caf50;
      color: white;
      padding: 15px;
      border-radius: 10px;
      margin-top: 20px;
      text-align: center;
      font-weight: 600;
      display: none;
    }
    
    .success-message.show {
      display: block;
      animation: slideIn 0.3s ease-out;
    }
    
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🧹 清除缓存工具</h1>
    <p class="subtitle">奥数学院 - 登录问题修复工具</p>
    
    <div class="info-box">
      <h3>💡 何时使用此工具？</h3>
      <p>
        如果您登录后显示的用户名不正确（例如：登录taotao却显示admin），说明浏览器缓存了旧的用户信息。
        点击下方按钮可以一键清除所有缓存数据。
      </p>
    </div>
    
    <div class="status">
      <h3 style="margin-bottom: 15px; color: #333;">📊 当前缓存状态</h3>
      <div class="status-item">
        <span class="status-label">localStorage (user)</span>
        <span class="status-value" id="userStatus">检测中...</span>
      </div>
      <div class="status-item">
        <span class="status-label">localStorage (auth_token)</span>
        <span class="status-value" id="tokenStatus">检测中...</span>
      </div>
      <div class="status-item">
        <span class="status-label">Cookies (token)</span>
        <span class="status-value" id="cookieStatus">检测中...</span>
      </div>
    </div>
    
    <button onclick="clearAllCache()">🧹 一键清除所有缓存</button>
    <button class="secondary" onclick="window.location.href='/'">🏠 返回首页</button>
    <button class="secondary" onclick="window.location.href='/auth/login'">🔐 前往登录页</button>
    
    <div class="success-message" id="successMessage">
      ✅ 缓存已清除！请重新登录
    </div>
  </div>
  
  <script>
    // 检查缓存状态
    function checkCacheStatus() {
      // 检查 localStorage
      const user = localStorage.getItem('user');
      const token = localStorage.getItem('auth_token');
      
      document.getElementById('userStatus').textContent = user ? '存在 ⚠️' : '已清空 ✓';
      document.getElementById('userStatus').className = user ? 'status-value found' : 'status-value empty';
      
      document.getElementById('tokenStatus').textContent = token ? '存在 ⚠️' : '已清空 ✓';
      document.getElementById('tokenStatus').className = token ? 'status-value found' : 'status-value empty';
      
      // 检查 cookie
      const hasCookie = document.cookie.split(';').some(item => item.trim().startsWith('token='));
      document.getElementById('cookieStatus').textContent = hasCookie ? '存在 ⚠️' : '已清空 ✓';
      document.getElementById('cookieStatus').className = hasCookie ? 'status-value found' : 'status-value empty';
      
      // 如果发现用户信息，显示当前用户
      if (user) {
        try {
          const userData = JSON.parse(user);
          console.log('检测到缓存的用户信息:', userData);
          
          // 在页面上显示
          const infoBox = document.querySelector('.info-box');
          infoBox.innerHTML = `
            <h3>⚠️ 检测到缓存的用户信息</h3>
            <p>
              <strong>用户名：</strong>${userData.username}<br>
              <strong>显示名称：</strong>${userData.displayName}<br>
              <strong>角色：</strong>${userData.role}<br><br>
              如果这不是您当前想要登录的账号，请点击下方按钮清除缓存。
            </p>
          `;
        } catch (e) {
          console.error('解析用户信息失败:', e);
        }
      }
    }
    
    // 清除所有缓存
    function clearAllCache() {
      // 清除 localStorage
      localStorage.removeItem('user');
      localStorage.removeItem('auth_token');
      
      // 清除 cookies
      document.cookie.split(';').forEach(cookie => {
        const name = cookie.split('=')[0].trim();
        document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
      });
      
      // 显示成功消息
      const successMessage = document.getElementById('successMessage');
      successMessage.classList.add('show');
      
      // 更新状态
      setTimeout(() => {
        checkCacheStatus();
      }, 100);
      
      // 3秒后自动跳转到登录页
      setTimeout(() => {
        window.location.href = '/auth/login';
      }, 2000);
    }
    
    // 页面加载时检查状态
    checkCacheStatus();
    
    // 每2秒更新一次状态
    setInterval(checkCacheStatus, 2000);
  </script>
</body>
</html>

